<template>
    <div class="login">
      <div class="loginCenter">
        <h2>后台管理系统</h2>
        <div class="loginLog">
          <div class="userInput">
            <el-input v-model="user" placeholder="请输入账号"></el-input>
          </div>
          <div class="passInput">
            <el-input v-model="pass" placeholder="请输入密码"></el-input>
          </div>
          <div class="codeInput">
            <el-input v-model="pass" placeholder="请输入验证码"></el-input>
            <span @click="code">{{passCode}}</span>
          </div>
          <div class="loginBtn">
            <el-button @click="logincommit">登录</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用
  data () {
    return {
      user: '',
      pass: '',
      passCode: '1423'

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    code () { // 验证码

    },
    logincommit () { // 提交

    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scope>
.login{
  width: 100%;
  height: 100%;
  background-color: rgba(68, 74, 90, 100);
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginCenter{
  width:489px;
  height: 490px;
  background-color: rgba(68, 74, 90, 100);
  color: rgba(255, 255, 255, 100);
  display: flex;
  flex-direction: column;
}
.loginCenter h2{
  height: 73px;
  text-align: center;
  line-height: 73px;
  margin-bottom: 52px;
  font-size: 35px;
}
.loginLog{
  width: 100%;
  flex: 1;
  background-color: rgb(113, 117, 129);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.loginLog div{
  display: flex;
  align-items: center;
  justify-content: center;
}

.userInput{
  width: 100%;
  height: 46px;
  margin-top:44px;
  display: flex;
  margin-bottom: 37px;

}
.userInput .el-input__inner{
  width: 360px;
  height: 46px;
  border-radius: 60px;
  background-color: rgba(255, 0, 0, 0);
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
}
.passInput{
  width: 100%;
  height: 46px;
}
.passInput .el-input__inner{
  width: 360px;
  height: 46px;
  border-radius: 60px;
  background-color: rgba(255, 0, 0, 0);
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
}
.codeInput{
  width: 100%;
  height: 46px;
  margin-top:34px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 69px 0px 68px;
  margin-bottom: 21px;
}
.codeInput .el-input{
  width: 176px;
}
.codeInput .el-input__inner{
  width: 176px;
  height: 46px;
  border-radius: 7px;
}
.codeInput span{
  margin-left:40px;
  display: block;
  width: 134px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  border-radius: 7px;
  background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
  color: red;
  font-size: 18px;
}
.loginBtn{
  width: 100%;
  display: flex;

}
.loginBtn .el-button{
  width: 350px;
  height: 50px;
  border-radius: 60px;
  background-color: rgba(0, 200, 196, 100);
  color: rgba(255, 255, 255, 100);
  border:none;
}
</style>
